import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, update, add, remove } from "@/api/room";

import { ProFormText, ProFormTextArea } from "@ant-design/pro-form";

export default () => {
  const columns = [
    {
      title: "教室名称",
      dataIndex: "name",
      width: 150,
    },
    {
      title: "承载人数",
      dataIndex: "num",
      width: 150,
      search: false,
    },
  ];
  const renderFormItem = () => {
    return (
      <>
        <ProFormText
          label="名称"
          name="name"
          rules={[
            { required: true, message: "请输入名称" },
            {
              max: 20,
              message: "最长为20位",
            },
          ]}
        />
        <ProFormText
          label="承载人数"
          name="num"
          placeholder="请输入承载人数"
          rules={[
            {
              required: true,
              message: "请输入承载人数",
            },
          ]}
        />

        <ProFormTextArea
          fieldProps={{
            rows: 5,
          }}
          name="remark"
          label="备注"
          placeholder="请输入备注"
        />
      </>
    );
  };
  return (
    <PageContainer>
      {useCommonTable({
        title: "教室",
        renderFormItem,
        columns,
        modalWidth: 600,
        fetchList,
        add,
        update,
        remove,
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
